<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root"></div>
</body>
<script type="text/babel">
    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 1- null,undefined,true,false不会进行渲染
        // 2- 不要直接写函数与对象
        // 3- 如果插入的是一个数组，那么会直接将数据的元素进行展开并渲染。
        // 4- 如果插入的是一个React元素，可以直接渲染
        // let num = 100;
        // let vDom = (
        //     <span>span1</span>
        // )
        // root.render((
        //     <div>
        //         <p>1</p>
        //         <p>{1}</p>
        //         <p>{num}</p>
        //         <p>{undefined}</p>
        //         <p>{null}</p>
        //         <p>{true}</p>
        //         <p>{false}</p>
        //         <p>{(function(){return 100})()}</p>
        //         {/*<p>{{a:1}}</p>*/}}
        //         <p>{[1,2,3,4]}</p>
        //         <p>{vDom}</p>
        //         <p><span>span2</span></p>
        //     </div>
        // ))
    }
    {
        // 2- 数组进行展开
        // const arr = [1,2,3,4];
        // root.render((
        //     <div>
        //         <div>
        //             {arr.map(item=>{
        //                 return item;
        //             })}
        //         </div>
        //         <div>
        //             {
        //                 // [<h3>1</h3>,<h3>2</h3>,<h3>3</h3>,<h3>4</h3>]
        //                 arr.map(item=>{
        //                     return (
        //                         <h3 key={item}>{item}</h3>
        //                     )
        //                 })
        //             }
        //         </div>
        //         <div>
        //             {
        //                 arr.map((item,index)=>(
        //                     <h3 key={index}>{item}</h3>
        //                 ))
        //             }
        //         </div>
        //
        //     </div>
        // ))
    }
    {
        // 3- style className
        const s1 = {
            color:"yellow"
        }
        const one = "two";
        const imgSrc = "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF";
        const obj = {
            width:300,
            src:"https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
        }
        root.render((
            <div>
                <p style={{
                    color:"red",
                    background:"green"
                }}>1</p>

                <p style={s1}>2</p>
                <p className="one">1</p>
                <p className={one}>2</p>
                {/*
                <img width={100} src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt=""/>
                <img width="200" src={imgSrc} alt=""/>
                <img width={obj.width} src={obj.src} alt=""/>
                */}
                <img {...obj} alt=""/>

            </div>
        ))
    }
</script>
</html>